<template>
	<div class="timeSlot">
		<div class="timeShow" @click="timeclick">
			{{ startText?(startText.getFullYear()+'-'+(startText.getMonth()+1)+'-'+startText.getDate()):''}}&nbsp;&nbsp;至&nbsp;&nbsp;
			{{ !endText || endText=='不限'?'不限':( endText.getFullYear()+'-'+(endText.getMonth()+1)+'-'+endText.getDate()) }}
			<n3-icon class="down" type="angle-down"></n3-icon>
		</div>
		<transition name="fadeLeft">
			<div class="controlBox" v-show="showTime">
				<div class="timeInput">
					<div class="H">
						日期范围：
					</div>
					<div>
						<vue-datepicker-local  v-model="start"   format="YYYY-MM-DD"/>
						-<vue-datepicker-local v-model="end"   format="YYYY-MM-DD"/>
					</div>
					<div class="H">
						快捷日期:
					</div>
					<div class="M">
						<a :class="{'active':active==1}" @click="active=1"  href="javascript:;">15天后结束</a>
						<a :class="{'active':active==2}" @click="active=2"  href="javascript:;">30天后结束</a>
						<a :class="{'active':active==3}" @click="active=3"  href="javascript:;">60天后结束</a>
						<!-- <a :class="{'active':active==4}" @click="active=4"   href="javascript:;">90天后结束</a> -->
						<a :class="{'active':active==5}" @click="active=5"   href="javascript:;">自然月月底结束</a>
						<a :class="{'active':active==6}" @click="active=6"   href="javascript:;">次月月底结束</a>
						<!--<a :class="{'active':active==7}" @click="active=7"   href="javascript:;">不限</a>-->
					</div>
				</div>
				<div class="btnBox">
					<n3-button size="xs" @click.native="sure" type="info">确定</n3-button>
					<n3-button  size="xs" @click.native="showTime=false" >取消</n3-button>
				</div>
			</div>
		</transition>
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>